<template>
  <div class="health-monitor">
    <!-- 使用toRefs解构 -->
    <!-- reactive对象展示 -->
    {{patient.name}}--{{patient.department}}
    <!-- toRef转换的预警状态 -->
    {{name}} 
    <!-- ref基础类型绑定 -->
    <input v-model.number="blood1" placeholder="低压">
    <input v-model.number="blood2" placeholder="高压">
    <button @click="update">更新</button>
  </div>
</template>
<script setup>
import { ref, reactive, toRef, toRefs } from 'vue'
const patient = reactive({
  name: '吴同学',
  department: '大连东软信息学院'
})
const blood1 = ref(70)
const blood2 = ref(120)

const update = () => {
  patient.name = '张三'
  patient.department = '大连'
  blood1.value = 110 // 修改这里，将xueya1改为blood1
  blood2.value = 70  // 修改这里，将xueya2改为blood2
}
const name = toRef(patient, 'name')
</script>
<style>
.health-monitor {
  padding: 20px;
  max-width: 300px;
  margin: 20px auto;
  border: 1px solid #ccc;
}
input { margin: 5px; display: block; }
button { margin-top: 10px; }
p[style*="red"] { color: red; }
</style>